<template>
    <div class="bi-isolation-type" :class="['bi-isolation-type--' + type, { 'is-active': active }]" :style="style">
        <i class="bi-isolation-type__icon" :style="iconStyle"></i> 
        <slot></slot>
    </div>
</template>
<script>
import IsolationTypeStyle from './isolation-type-style'

export default {
    name: 'BiIsolationType',
    props: {
        type: {
            type: [String, Number]
        },
        active: {
            type: Boolean,
            default: false
        }
    },
    computed: {
        style () {
            const sy = IsolationTypeStyle[this.type]
            if (!sy) {
                return
            }
            return {
                'color': sy.color
            }
        },
        iconStyle () {
            const sy = IsolationTypeStyle[this.type]
            if (!sy) {
                return
            }
            return {
                'background-image': `url(${sy.icon})`
            }
        }
    }
}
</script>
<style lang="scss">
.bi-isolation-type{
    height: 27px;
    line-height: 27px;
    border-radius: 3px;
    padding: 0 10px;
    color: currentColor;
    position: relative;
    cursor: pointer;
    &:after{
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        border-radius: 3px;
        border: 1px solid currentColor;
        opacity: .5;
    }
    &:before{
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        border-radius: 3px;
        opacity: 0;
    }
    &.is-active{
        &:after{
            opacity: 1;
        }
        &:before{
            background-color: currentColor;
            opacity: .1;
        }
    }
}
.bi-isolation-type__icon{
    display: inline-block;
    width: 13px;
    height: 13px;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
    vertical-align: top;
    margin-top: 7px;
    margin-right: 3px;
}
</style>